<template>
  <div class="moments-card-simple-box">
    <div class="moments-card-simple-top" @click="toDetail(data.post_id)">
      <van-image width="40px" height="40px" fit="cover" radius="4px" :src="data.author_avatar" />
      <div class="content-box">
        <div class="top">
          <div class="title">{{ data.author_name }}</div>
        </div>
        <div class="bottom">
          <div class="time">{{ formatTime(data.created_at) }}</div>
        </div>
      </div>
      <div
        class="delete"
        @click.stop="deletePost(data.post_id)"
        v-if="userStore.user?.user_id === data?.user_id"
      >
        删除
      </div>
    </div>
    <div class="moments-card-simple-bottom" @click="toDetail(data.post_id)">
      <div class="moments-card-simple-bottom-content">
        {{ data.content }}
      </div>
      <van-image
        v-if="data.image_urls.length > 0"
        width="180px"
        height="180px"
        fit="cover"
        radius="4px"
        :src="'http://127.0.0.1:3000' + data.image_urls[0]"
      />
    </div>
    <div class="moments-card-simple-bottom-line">
      <van-row align="center" justify="space-around">
        <van-col span="4" @click="triggerLike"
          ><cp-icon
            :name="data.is_liked ? 'find-like-active' : 'find-like'"
            class="moments-card-simple-bottom-icon"
          ></cp-icon
          ><span class="moments-card-simple-bottom-text">喜欢</span></van-col
        >
        <van-col span="4" @click="toDetail(data.post_id)"
          ><cp-icon
            name="find-comments
"
            class="moments-card-simple-bottom-icon"
          ></cp-icon
          ><span class="moments-card-simple-bottom-text">评论</span></van-col
        >
        <van-col
          span="4"
          @click="sharePost(data.post_id)"
          v-if="userStore.user?.user_id !== data?.user_id"
          ><cp-icon
            name="find-share
"
            class="moments-card-simple-bottom-icon"
          ></cp-icon
          ><span class="moments-card-simple-bottom-text">分享</span></van-col
        >
      </van-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import { formatTime } from '@/utils/format'
import { likePost, deletePostData, sharePostData } from '@/services/monents'
import { showConfirmDialog, showToast } from 'vant'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores'
const userStore = useUserStore()
type monentsType = {
  author_avatar: string
  author_name: string
  content: string
  created_at: string
  image_urls: string[]
  is_liked: boolean
  post_id: number
  user_id: string
}
interface Iprops {
  data: monentsType
}
interface Iemits {
  (e: 'likeClick', data: boolean): void
  (e: 'deletePost'): void
  (e: 'sharePost'): void
}
const props = defineProps<Iprops>()
const emit = defineEmits<Iemits>()
const triggerLike = async () => {
  try {
    await likePost(props.data?.post_id)
    emit('likeClick', !props.data.is_liked)
  } catch (err) {
    console.log(err)
    showToast('点赞失败')
  }
}
const router = useRouter()

const toDetail = (id: number) => {
  router.push(`/momentsDetail/${id}`)
}
const deletePost = async (id: number) => {
  try {
    await deletePostData(id)
    showToast('删除成功')
    emit('deletePost')
  } catch (err) {
    console.log(err)
    showToast('删除失败')
  }
}
const sharePost = (id: number) => {
  showConfirmDialog({
    title: '是否分享此条动态到朋友圈'
  })
    .then(async () => {
      // on confirm
      try {
        await sharePostData(id)
        showToast('分享成功')
        emit('sharePost')
      } catch (err) {
        console.log(err)
        showToast('分享失败')
      }
    })
    .catch(() => {
      // on cancel
    })
}
</script>
<style lang="scss" scoped>
.moments-card-simple-box {
  margin-bottom: 10px;
  background-color: var(--bg-tertiary);
  .moments-card-simple-top {
    height: 70px;
    padding: 0px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .content-box {
      flex: 1;
      padding-left: 13px;
      .title {
        height: 24px;
        color: var(--cp-contact-color);
        font-size: 16px;
      }
      .time {
        font-size: 14px;
        color: rgba(153, 153, 153, 1);
        margin-top: 1px;
      }
    }
  }
  .moments-card-simple-bottom {
    padding-left: 60px;
    padding-right: 10px;
    &-content {
      margin-bottom: 8px;
    }
    &-line {
      margin-top: 8px;
      .moments-card-simple-bottom-text {
        margin-top: 4px;
        font-size: 14px;
        margin-left: 7px;
      }
    }
    &-icon {
      width: 24px;
      height: 24px;
      vertical-align: middle;
    }
  }
}
.delete {
  color: #999999;
  font-size: 14px;
  margin-right: 10px;
  margin-bottom: 15px;
}
</style>
